
import { Breadcrumb, Layout,theme } from 'antd';
import React from 'react';

import {Outlet,useLocation,Link} from 'react-router-dom';
const { Content } = Layout;



export default function Mycontent() {
    const RouterLocation=useLocation()
   
    const routes = [
        {
          path: RouterLocation.pathname,
          breadcrumbName: RouterLocation.state,
        },
        {
          path: 'first',
          breadcrumbName: 'first',
          
        },
        {
          path: 'second',
          breadcrumbName: 'second',
        },
      ];
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    function itemRender(route, params, routes, paths) {
        
        const last = routes.indexOf(route) === routes.length - 1;
        return last ? (
          <span>{route.breadcrumbName}</span>
        ) : (
          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        );
      }
    return (
        <Layout
            style={{
                padding: '0 24px 24px',
            }}
        >
            {/* <Breadcrumb
                style={{
                    margin: '16px 0',
                }}
                itemRender={itemRender}
            >
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
            </Breadcrumb> */}
            <Breadcrumb itemRender={itemRender} routes={routes} />
            <Content
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                    background: colorBgContainer,
                }}
            >
                <Outlet></Outlet>
            </Content>
        </Layout>
    )
}
